<template>
	<view class="indexPage">
		<!-- :style="{ height: windowHeight + 'px' }" -->
		<!-- <image src="../static/images/newIndex/indexBG.png" class="indexBg"></image> -->
		<view class="bannerBox" :style="{paddingTop: ($wanlshop.wanlsys().top)+10 + 'px'}">
			<!-- <wanl-page-banner :pageData="bannerData" /> -->
			<view class="imglist">
				<u-swiper :list="imgList" keyName="url" height="150px" :autoplay="true" indicator indicatorMode="line">
				</u-swiper>
			</view>
		</view>
		<xzw-notice :list="noticeList" :showMore="false" theme="transparent" :showIcon="true" />
		<scroll-view scroll-y="true" :style="{ height: scrollViewHeight + 'px' }">
			<!-- <view class="functionList">
				<view class="functionItem">
					<view class="indexbg" @click="onLink('')">
						<h3>元宇宙模块web3.0应用</h3>
						<p>Metaverse module web3.0 application</p>
					</view>
					<view class="indexbg1">
						<view class="bg" v-for="(item,index) in bgList" :key="index" :class="'bg'+index"
							@click="onLink(item.page)">
							<h3>{{item.name}}</h3>
							<p>{{item.text}}</p>
						</view>
					</view>
					<view class="indexbg2" @click="onLink('/pages/otcApp')">
						<h3>算力划转系统（OTC）</h3>
						<p>The points transfer system (OTC)</p>
					</view>
				</view>
			</view> -->
			<view class="functionList">
				<view class="functionItem" v-for="(item,index) in functionList" :key="index" @click="onLink(item.page)">
					<image :src="item.iconBg" class="itemBg"></image>
					<view class="contentBox">
						<image :src="item.icon" class="icon"></image>
						<view class="center">
							<view class="name">{{item.name}}</view>
							<view class="english">{{item.english}}</view>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="show" mode="bottom" @close="close" :closeable='false' :closeOnClickOverlay='true' :round="10">
			<view class="cont">
				<view class="title">{{dataInfo.title}}</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="xy" v-html="dataInfo.content"></view>
				</scroll-view>
				<view class="btn-list">
					<view class="btn-reset" @click="close">我知道了</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				navTop: 0, //距离顶部高度
				scrollViewHeight: 0, //可滚动剩余高度
				noticeList: [],
				functionList: [],
				bannerData: {
					name: "轮播组件",
					type: "banner",
					style: {
						color: "#000000"
					},
					params: {
						interval: "2800",
						height: "230rpx",
						banstyle: "1",
					},
					data: [],
				},
				bgList: [{
					name: '赚算力',
					text: 'Earn points',
					page: '/pages/product/bdGoodsList',
				}, {
					name: '算力应用',
					text: 'Integral application',
					page: '/pages/application',
				}],
				imgList: [],
				show: false,
				dataInfo: {}
			}
		},
		onShow() {
			this.functionList = [
				// {
				// 	name: '元宇宙模块web3.0应用', //'赚算力',
				// 	english: 'Metaverse module web3.0 application',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index10.png',
				// 	iconBg: '/static/images/newIndex/indexBg04.png'
				// }, 
				{
					name: '赚算力', //'算力商城',
					english: 'Earn points',
					page: '/pages/product/bdGoodsList',
					// page: 't',
					icon: '/static/images/newIndex/index01.png',
					iconBg: '/static/images/newIndex/indexBg01.png'
				}, {
					name: '算力应用', //'AI算力智能搬砖',
					english: 'Integral application',
					page: '/pages/application',
					icon: '/static/images/newIndex/index02.png',
					iconBg: '/static/images/newIndex/indexBg02.png'
				}, {
					name: '算力划转系统（OTC）', // '大健康生态系统',
					english: 'The points transfer system (OTC)',
					page: '/pages/otcApp',
					icon: '/static/images/newIndex/index04.png',
					iconBg: '/static/images/newIndex/indexBg04.png'
				},
				// {
				// 	name: this.$t('newIndex.qcstxt'), // '汽车生态系统',
				// 	english: 'Automotive ecosystem',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index05.png',
				// 	iconBg: '/static/images/newIndex/indexBg05.png'
				// }, {
				// 	name: this.$t('newIndex.fdcstxt'), //'房地产生态系统',
				// 	english: 'Real Estate Ecosystem',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index06.png',
				// 	iconBg: '/static/images/newIndex/indexBg06.png'
				// }, {
				// 	name: this.$t('newIndex.jfhzxt'), //'算力划转系统（OTC）',
				// 	english: 'Points Transfer (OTC)',
				// 	// /pages/newPage/otc?id=1
				// 	page: '/pages/newPage/otc?id=1',
				// 	icon: '/static/images/newIndex/index07.png',
				// 	iconBg: '/static/images/newIndex/indexBg07.png'
				// }, {
				// 	name: this.$t('newIndex.jfcj'), //'算力抽奖',
				// 	english: 'Points draw',
				// 	//pages/apps/jinyuanbao/choujiang/choujiang
				// 	page: '',
				// 	icon: '/static/images/newIndex/index08.png',
				// 	iconBg: '/static/images/newIndex/indexBg08.png'
				// }, {
				// 	name: this.$t('newIndex.gpxt'), //'股票系统',
				// 	english: 'Stock system',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index09.png',
				// 	iconBg: '/static/images/newIndex/indexBg09.png'
				// },
			]

		},
		onLoad() {
			this.getNoticeList()
			this.getBannerList()
			this.getNewNotice()
		},
		onReady() {
			var wanlsys = this.$wanlshop.wanlsys();
			this.windowHeight = wanlsys.windowHeight;
			let _self = this
			let view = uni.createSelectorQuery().select('.functionList')
			view.boundingClientRect(data => {
				_self.navTop = data.top
				_self.scrollViewHeight = _self.windowHeight - data.top
			}).exec()
		},
		methods: {
			onLink(url) {
				if (url == '') {
					return uni.showToast({
						icon: 'none',
						title: '敬请期待'
					})
				}
				let user = uni.getStorageSync("wanlshop:user")
				if (!user) {
					return uni.showToast({
						icon: 'none',
						title: '未登录,请先登录'
					})
				}
				this.$wanlshop.auth(url);
			},
			getNoticeList() {
				uni.request({
					url: "/index/noticeList",
					method: "POST",
					data: {},
					complete: (res) => {
						if (res.res.code == 1) {
							this.noticeList = res.res.data
						}
					},
				});
			},
			getBannerList() {
				uni.request({
					url: "/index/wapBanner",
					method: "POST",
					data: {},
					complete: (res) => {
						if (res.res.code == 1) {
							this.bannerData.data = res.res.data
							for (var i = 0; i < res.res.data.length; i++) {
								this.imgList.push({
									url: this.$store.state.common.appUrl.oss + res.res.data[i].image,
								})
							}
							console.log(this.imgList);
						}
					},
				});
			},
			getNewNotice() {
				uni.request({
					url: "/user/getNewNotice",
					method: "POST",
					data: {},
					complete: (res) => {
						if (res.res.code == 1) {
							if (res.res.data == null) {
								this.show = false
							} else {
								this.show = true
								this.dataInfo = res.res.data
							}
						}
					},
				});
			},
			close() {
				this.show = false
			}
		}
	}
</script>
<style scoped lang="scss">
	.indexPage {
		position: relative;
		// overflow: hidden;
		background: #FEFEFE;
	}

	.indexBg {
		width: 100%;
		height: 194rpx;
		position: absolute;
		top: 0;
		z-index: 0;
	}

	.bannerBox {
		.imglist {
			padding: 0 16px;
			border-radius: 10px;
		}
	}

	.functionList {
		margin: 26rpx 28rpx;

		.functionItem {
			position: relative;
			background: #fff;
			border-radius: 16rpx;
			border: 2rpx solid #E6E8EA;
			overflow: hidden;
			margin-bottom: 24rpx;

			.itemBg {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.contentBox {
				position: relative;
				padding: 0 26rpx 0 12rpx;
				height: 104rpx;
				z-index: 3;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}

				.center {
					flex: 1;
					width: 0;
					margin-left: 12rpx;

					.name {

						font-size: 37.5rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}

					.english {
						width: 450rpx;
						font-size: 28.13rpx;
						color: #999999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}
				}
			}
		}
	}

	.cont {
		background: #fff;

		.title {
			text-align: center;
			font-size: 28rpx;
			color: #333;
			padding: 40rpx;
		}

		.xy {
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 48rpx;
			text-align: justified;

		}

		.scroll-y {
			height: 40vh;
		}

		.btn-list {
			width: 100%;
			height: 150rpx;

			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-reset {
				width: 100%;
				margin: 20rpx 20rpx 0;
				height: 96rpx;
				background: #337DFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 30rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>